<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>食品: <input type="text" placeholder="搜索" v-model="userInfo.name"></p>
        <p>种类: <input type="text" placeholder="搜索" v-model="userInfo.kind"></p>
        <p>产地: <input type="text" placeholder="搜索" v-model="userInfo.place"></p>
        <p>价格: <input type="text" placeholder="搜索" v-model="userInfo.price"></p>
        <ul  >
            <li v-for="item in arr" :key="item.id">
                {{ item }}
            </li>
        </ul>
    </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: {
              val:"",
              userInfo:{
                  name:"",
                  kind:"",
                  place:"",
                  price:""
              },
              nameList:[],
              arr:[{
                  id:1,
                  name:'牛奶',
                  kind:'伊利纯牛奶',
                  place:'北京',
                  price:30
              },
              {
                  id:2,
                  name:'牛奶',
                  kind:'蒙牛纯牛奶',
                  place:'上海',
                  price:30
              },
              {
                  id:3,
                  name:'牛奶',
                  kind:'伊利酸奶',
                  place:'北京',
                  price:20
              },
              {
                  id:4,
                  name:'牛奶',
                  kind:'特仑苏纯牛奶',
                  place:'内蒙古',
                  price:68
              },
              {
                  id:5,
                  name:'牛奶',
                  kind:'蒙牛纯甄',
                  place:'上海',
                  price:70
              },
              {
                  id:6,
                  name:'牛奶',
                  kind:'君乐宝酸奶',
                  place:'杭州',
                  price:20
              },
              {
                  id:7,
                  name:'牛奶',
                  kind:'伊利安慕希',
                  place:'杭州',
                  price:70
              },
            ]
          },
          watch:{
              userInfo:{
                  deep:true,
                  handler(newValue , oldValue){
                      console.log(newValue)
                  }
              }
          }
         
          
        })
      </script>
</body>
</html>